<template>
  <el-dialog
    :title="props.info.type === 'batch' ? '批量加入数据源' : '加入数据源'"
    width="450px"
    :model-value="props.modelValue"
    @update:model-value="(v) => emit('update:model-value', v)"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form @submit.prevent ref="formRef" :model="formData" :rules="rules" label-width="150px">
      <el-form-item label="数据源名称" prop="name" v-if="props.info.type === 'single'">
        <ns-input
          v-model="formData.name"
          placeholder="请输入数据源名称"
          clearable
          style="width: 85%"
        />
      </el-form-item>
      <el-form-item label="归属机构" prop="deptId">
        <el-cascader
          v-model="formData.deptId"
          placeholder="请选择归属机构"
          :props="formOption.cascaderProps"
          :options="formOption.deptList"
          filterable
          value-on-clear=""
          clearable
          style="width: 85%"
          :filter-method="sysFilterMethod"
        />
      </el-form-item>
      <el-form-item label="归属系统" prop="sysId">
        <el-cascader
          v-model="formData.sysId"
          placeholder="请选择归属系统"
          :props="formOption.systemCascaderProps"
          :options="formOption.systemList"
          filterable
          clearable
          style="width: 85%"
          value-on-clear=""
          :filter-method="sysFilterMethod"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="() => emit('update:model-value', false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { sysFilterMethod } from '@/utils/selectFilter'
import { computed, onMounted } from 'vue'
import { handleTree } from '@/utils/tree'
import * as api from '@/api/asset/taskManage'
import { getSimpleDeptList } from '@/api/system/dept'

const formRef = ref()
const emit = defineEmits(['update:model-value', 'submit'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  info: {
    type: Object,
    default: () => {}
  }
})

const formOption = reactive({
  formData: {
    name: '',
    deptId: '',
    sysId: ''
  },
  systemList: [],
  deptList: [],
  cascaderProps: {
    checkStrictly: true,
    label: 'name',
    value: 'id',
    children: 'children',
    emitPath: false
  },
  systemCascaderProps: {
    checkStrictly: true,
    label: 'value',
    value: 'id',
    children: 'children',
    emitPath: false
  }
})
const isRequired = computed(() => {
  return !formData.value.deptId && !formData.value.sysId
})
const rules = computed(() => ({
  name: [{ required: true, message: '请输入数据源名称', trigger: 'blur' }],
  sysId: [{ required: isRequired.value, message: '请选择归属系统', trigger: 'change' }],
  deptId: [{ required: isRequired.value, message: '请选择归属机构', trigger: 'change' }]
}))
const { formData } = toRefs(formOption)

async function submit() {
  const valid = await formRef.value.validate().catch(() => {})
  valid &&
    emit('submit', {
      ...formData.value,
      deptId: formData.value.deptId == '' ? '0' : formData.value.deptId
    })
  valid && emit('update:model-value', false)
}

async function getDeptList() {
  const data = await getSimpleDeptList()
  formOption.deptList = data
}
async function getSystemList() {
  const data = await api.getSimpleSystemList()
  formOption.systemList = handleTree(data, 'id', 'pid')
}

onMounted(() => {
  getDeptList()
  getSystemList()
  if (JSON.stringify(props.info) !== '{}') {
    formData.value = props.info
    if (props.info.type === 'single') {
      formData.value.name = props.info.idAndNames[0]?.name || ''
    }
  }
})
</script>
